<script lang="ts" setup>
import { onActivated, ref } from 'vue';
import type { FormInstance } from '@arco-design/web-vue/es/form';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { dialog } from '@/settings/components/dialog';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const loading = ref(false);
const formData = ref({
  upId: '',
  upType: NaN,
  communityPic: '',
  communityTitle: '',
  communityDesc: '',
  upPic: '',
  upPrompt: '',
  upLink: '',
});
const formRef = ref<FormInstance>();
const { success } = useNotification();

const preview1Window = async (type: number) => {
  dialog(() => import('./components/preview-window.vue'), {
    title: t('settings.view.popupWindow.preview'),
    props: {
      template: type,
      title: formData.value.communityTitle,
      des: type === 1 ? formData.value.communityDesc : formData.value.upPrompt,
      pic: type === 1 ? formData.value.communityPic : formData.value.upPic,
    },
    buttons: { cancel: t('settings.action.close') },
    width: 720,
  });
}

const submit = async () => {
  const res = await formRef.value?.validate();

  if (res) {
    return;
  }

  const { isSuccess } = await $fetch('/admin/popup/update', {
    method: 'post',
    data: {
      ...formData.value,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
    getDetail();
  }
};

const getDetail = async () => {
  const { isSuccess, data } = await $fetch('/admin/popup/info', {
    method: 'get',
    loadingStatus: loading,
  });

  if (isSuccess) {
    formData.value = {
      upId: data.upId,
      upType: data.upType,
      communityPic: data.communityPic,
      communityTitle: data.communityTitle,
      communityDesc: data.communityDesc,
      upPic: data.upPic,
      upPrompt: data.upPrompt,
      upLink: data.upLink,
    };
  }
}

onActivated(() => {
  getDetail();
});
</script>

<template>
  <OpenPageSection>
    <OpenGeneralCard>
      <AForm ref="formRef" auto-label-width scroll-to-first-error :model="formData" @submit="submit" v-confirm>
        <AFormItem :label="$t('settings.view.popupWindow.column1')" field="upType" :rules="[{ required: true }]">
          <ARadioGroup v-model="formData.upType">
            <ARadio :value="1">{{ $t('settings.view.popupWindow.title1') }}</ARadio>
            <ARadio :value="2">{{ $t('settings.view.popupWindow.title2') }}</ARadio>
            <ARadio :value="3">{{ $t('settings.view.popupWindow.title3') }}</ARadio>
          </ARadioGroup>
        </AFormItem>

        <template v-if="formData.upType === 1">
          <AFormItem :label="$t('settings.view.popupWindow.column2')" field="communityPic" :help="$t('settings.view.popupWindow.help1')">
            <OpenUpload v-model="formData.communityPic" />
          </AFormItem>

          <AFormItem :label="$t('settings.view.popupWindow.column3')" field="communityTitle">
            <AInput v-model="formData.communityTitle" :max-length="35" allow-clear show-word-limit />
          </AFormItem>

          <AFormItem :label="$t('settings.view.popupWindow.column4')" field="communityDesc">
            <AInput v-model="formData.communityDesc" :max-length="50" allow-clear show-word-limit />
          </AFormItem>
        </template>

        <template v-if="formData.upType === 2">
          <AFormItem :label="$t('settings.view.popupWindow.column2')" field="upPic" :rules="[{ required: true, message: $t('settings.notification.required') }]" :help="$t('settings.view.popupWindow.help1')">
            <OpenUpload v-model="formData.upPic" />
          </AFormItem>

          <AFormItem :label="$t('settings.view.popupWindow.column5')" field="upPrompt" :rules="[{ required: true, message: $t('settings.notification.required') }]">
            <AInput v-model="formData.upPrompt" :max-length="50" allow-clear show-word-limit />
          </AFormItem>

          <AFormItem :label="$t('settings.view.popupWindow.column6')" field="upLink" :rules="[{ required: true, message: $t('settings.notification.required') }]">
            <AInput v-model="formData.upLink" :max-length="50" allow-clear show-word-limit />
          </AFormItem>
        </template>

        <ADivider />

        <AFormItem>
          <ASpace>
            <AButton html-type="submit" type="primary" :loading="loading">{{ $t('settings.action.submit') }}</AButton>
            <AButton v-if="formData.upType === 1 || formData.upType === 2" @click="preview1Window(formData.upType)">{{ $t('settings.action.preview') }}</AButton>
          </ASpace>
        </AFormItem>
      </AForm>
    </OpenGeneralCard>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
